<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设备能源消耗 - ECharts</title>
    <style> 
    	html, body {
            width: 100%;
            height: 100%;
            margin: 0; 
            padding: 0;
        }
    .div-a{ float:left;width:49%; position: relative; /*脱离文档流*/top: 50%; /*偏移*/ margin-top: -100px;} 
    .div-b{ float:left;width:49%; position: relative; /*脱离文档流*/top: 50%; /*偏移*/ margin-top: -100px;} 
    </style> 
    <!-- 引入jquery.js -->
	<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="static/js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="div-a" id="one" style="height:200px;"></div> 
    <div class="div-b" id="two" style="height:200px;"></div> 
    <script type="text/javascript">
        // 
        var oneChart = document.getElementById('one');
        var twoChart = document.getElementById('two');
        
        var myOneChart = echarts.init(oneChart);
        var myTwoChart = echarts.init(twoChart);
        
        //one option
        optionOne = {
        	    color: ['#5b9cd6'],
        	    tooltip : {
        	        trigger: 'axis',
        	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        	        }
        	    },
        	    grid: {
        	        left: '3%',
        	        right: '4%',
        	        bottom: '3%',
        	        containLabel: true
        	    },
        	    xAxis : [
        	        {
        	            type : 'category',
        	            data : ['XK101', 'XK102', 'XK201', 'XK202', 'XK301', 'XK302', 'XK303'],
        	            axisTick: {
        	                alignWithLabel: true
        	            }
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'直接访问',
        	            type:'bar',
        	            barWidth: '60%',
        	            data:[100, 152, 200, 334, 390, 330, 220]
        	        }
        	    ]
        	};
        //two 
        optionTwo = {
        	    title: {
        	        text: '线体能源消耗(KW)',
        	        left:'center'
        	    },
        	    color:['#5b9cd6'],
        	    tooltip : {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            label: {
        	                backgroundColor: '#6a7985'
        	            }
        	        }
        	    },
        	    legend: {
        	        show : false
        	    },
        	    grid: {
        	        left: '3%',
        	        right: '4%',
        	        bottom: '3%',
        	        containLabel: true
        	    },
        	    xAxis : [
        	        {
        	            type : 'category',
        	            boundaryGap : false,
        	            data : ['4:00','5:00','6:00','7:00','8:00','9:00','10:00']
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'邮件营销',
        	            type:'line',
        	            stack: '总量',
        	            areaStyle: {normal: {}},
        	            data:[120, 132, 101, 134, 90, 230, 210]
        	        }
        	    ]
        	};     
        // 使用刚指定的配置项和数据显示图表。
        myOneChart.setOption(optionOne);
        myTwoChart.setOption(optionTwo);
        
        //one
        setTimeout(function (){
		    window.onresize = function () {
		        myOneChart.resize();
		        myTwoChart.resize();
		    }
		},1000)
    </script>
</body>
</html>